import React, {Component, PropTypes} from 'react';

import Container from '../container/Container.react';

export default class Section extends Component {

    static propTypes = {
        backgroundImage: PropTypes.string,
        className: PropTypes.string,
        autoHeight: PropTypes.bool
    };

    get className() {
        let classNames = ['section'];

        if(this.props.autoHeight) {
            classNames.push('fp-auto-height');
        }

        if(this.props.className) {
            classNames.push(this.props.className)
        }
        return classNames.join(' ');
    }

    get style() {
        let style = {};

        if(this.props.backgroundImage) {
            style.backgroundImage = 'url(' + this.props.backgroundImage + ')';
        }
        return style;
    }

    render() {
        return <div className={this.className} style={this.style}>
            <Container> 
                {this.props.children}
            </Container>
        </div>
    }
}


export class FeatureSection extends Component {

    static propTypes = {
        image: PropTypes.string.isRequired,
        align: PropTypes.string,
        size: PropTypes.object.isRequired,
        className: PropTypes.string
    };


    get actualSize() {
        const size = this.props.size;
        let maxHeight = window.innerHeight - 67;

        if(size.height <= maxHeight) {
            return {
                width: size.width,
                height: size.height
            };
        }

        return {
            width: size.width * maxHeight / size.height,
            height: maxHeight
        };
    }

    render() {
        const {image, size, className, align} = this.props;

        let style = {
            marginTop: -0.5 * this.actualSize.height + 'px'
        },
        classNames = [
            'feature-section'
        ],
        offset = {};



        if(!!align && align === 'right') {
            style.right = 0;
        } else {
            style.left = 0;
        }

        if( !!align && align === 'right') {
            offset.paddingRight = this.actualSize.width + 100 + 'px';
        } else {
            offset.paddingLeft = this.actualSize.width + 100 + 'px';
        }

        if(!!className) {
            classNames.push(className);
        }

        return <Section className={classNames.join(' ')}>
            <Container>
                <div style={style} className="avatar">
                    <img src={image} width={this.actualSize.width}/>
                </div>
                <div style={offset}> 
                   {this.props.children}
                </div>
            </Container>
        </Section>;
    }
}